<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="card_top_padding" style="margin-bottom: 11px">
      <a-tabs
        @change="
          (val) => {
            $router.push({ name: val })
          }
        "
        activeKey="MchGoods"
      >
        <a-tab-pane key="MchList" tab="商户列表"> </a-tab-pane>
        <a-tab-pane key="MchApply" tab="入驻审核"> </a-tab-pane>
        <a-tab-pane key="MchCommotCat" tab="所售类目"> </a-tab-pane>
        <a-tab-pane key="MchGoods" tab="入驻商品"> </a-tab-pane>
        <a-tab-pane key="MchOrder" tab="入驻订单"> </a-tab-pane>
        <a-tab-pane key="MchCashList" tab="提现申请"> </a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper" v-if="true">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="4" :sm="24">
              <a-input-search placeholder="请输入店铺名称" />
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="商品名称">
                <a-input placeholder="请输入商品名称" />
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="商品类型">
                <a-select placeholder="全部商品" default-value="a">
                  <a-select-option value="a">全部商户</a-select-option>
                  <a-select-option value="s">支付宝</a-select-option>
                  <a-select-option value="ms">微信</a-select-option>
                  <a-select-option value="pt">公众号</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons" style="margin: 0">
                <a-button style="margin-right: 8px" @click="() => (this.queryParam = {})">重置</a-button>
                <a-button type="primary" @click="$refs.tableList.refresh(true)">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- <a-row align="middle" justify="space-between" type="flex">
        <a-radio-group @change="refresh" v-model="queryParam.is_verify">
          <a-radio-button :value="0">
            待审核
          </a-radio-button>
          <a-radio-button :value="1">
            审核通过
          </a-radio-button>
          <a-radio-button :value="2">
            未通过
          </a-radio-button>
        </a-radio-group>
        <a-space>
          <a-space>快速操作</a-space>
          <a-space>
            <a-button>批量上架</a-button>
          </a-space>
          <a-space>
            <a-button>批量下架</a-button>
          </a-space>
          <a-space>
            <a-button>批量删除</a-button>
          </a-space>
        </a-space>
      </a-row> -->
      <!-- <a-row style="margin-bottom: 16px;background-color: #f6ffed;border: 1px solid #b7eb8f;padding: 6px;" v-if="selectedRowKeys.length > 0">
        <a-space>
          批量编辑：
          <a-button-group size="small">
            <a-button type="primary" @click="updateAll('status', 1)">
              上架
            </a-button>
            <a-button type="danger" @click="updateAll('status', 0)">
              下架
            </a-button>
          </a-button-group>
        </a-space>
      </a-row> -->
    </a-card>
    <a-card style="margin-top: 10px" :bordered="false">
      <s-table
        ref="tableList"
        size="default"
        :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        row-key="id"
        :columns="columns"
        :data="loadData"
      >
        <template slot="name" slot-scope="name, goods">
          <a-row>
            <a-space>
              <img style="width: 50px; height: 50px; border-radius: 5px" :src="goods.cover_pic" alt="" />
              <span>
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{{ name }} </span>
                  </template>
                  <a-row class="over_e">
                    {{ name }}
                  </a-row>
                </a-tooltip>
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{{ goods.cat }} </span>
                  </template>
                  <a-row style="color: rgba(0, 0, 0, 0.45)" class="over_e">
                    {{ goods.cat }}
                  </a-row>
                </a-tooltip>
              </span>
            </a-space>
          </a-row>
        </template>
        <template slot="system_cat" slot-scope="system_cat">
          <a-row>
            <div>
              {{ system_cat }}
            </div>
          </a-row>
        </template>
        <template slot="mch_name" slot-scope="mch_name">
          <a-row>
            <a-space>
              {{ mch_name }}
            </a-space>
          </a-row>
        </template>
        <template slot="price" slot-scope="price">
          <a-row>
            <a-space> {{ price }}元 </a-space>
          </a-row>
        </template>
        <template slot="goods_num" slot-scope="goods_num">
          <a-row>
            <a-space>
              {{ goods_num }}
            </a-space>
          </a-row>
        </template>
        <a-switch
          slot="status"
          :loading="statusLoading[goods.id] ? statusLoading[goods.id] : false"
          checked-children="上架"
          un-checked-children="下架"
          slot-scope="goodsStatus, goods"
          :default-checked="goodsStatus > 0"
          @change="onConfirmStatus('status', goods.id)"
        />
        <template slot="is_verify" slot-scope="is_verify">
          <a-row>
            <a-tag color="orange" v-if="is_verify == 0">
              待审核
            </a-tag>
            <a-tag color="blue" v-if="is_verify == 1">
              审核通过
            </a-tag>
            <a-tag color="red" v-if="is_verify == 2">
              审核未通过
            </a-tag>
          </a-row>
        </template>
        <span slot="action" slot-scope="text, goods">
          <!-- <a-button size="small" title="编辑" @click="onEdit(goods)">审核</a-button> -->
          <!-- <img style="width: 20px;height: 20px;" @click="onEdit(goods)" src="@/assets/images/chengxuma.png" alt=""> -->
          <a-button type="link" size="small" @click="onEdit(goods)" title="详情">详情</a-button>
          <!-- <a-divider type="vertical" />
          <a-button type="link" size="small" @click="onEdit(goods)" title="删除">删除</a-button> -->
          <!-- <a class="ant-dropdown-link">详情</a>
          <a class="ant-dropdown-link">删除</a> -->
        </span>
      </s-table>
    </a-card>
    <a-modal
      v-if="goodsInfo.id > 0"
      title="编辑商品"
      :width="700"
      @cancel="onClose"
      :destroyOnClose="true"
      :footer="null"
      v-model="visible"
    >
      <a-spin :spinning="spinning">
        <a-row :gutter="[16, 16]">
          <a-col :span="6" class="goods-title">商户名称：</a-col>
          <a-col :span="12">{{ goodsInfo.mch_name }}</a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="6" class="goods-title">商品名称：</a-col>
          <a-col :span="12">{{ goodsInfo.name }}</a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="6" class="goods-title">单位：</a-col>
          <a-col :span="12">{{ goodsInfo.unit }}</a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="6" class="goods-title">重量：</a-col>
          <a-col :span="12">{{ goodsInfo.weight }}</a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="6" class="goods-title">商品缩略图：</a-col>
          <a-col :span="12"><img :src="goodsInfo.cover_pic" style="width: 50px; height: 50px" alt="" /></a-col>
        </a-row>
        <!-- <a-row :gutter="[16,16]">
          <a-col :span="6" class="goods-title">商品缩略图：</a-col>
          <a-col :span="12">{{ goodsInfo.cover_pic }}</a-col>
        </a-row> -->
        <a-row :gutter="[16, 16]">
          <a-col :span="6" class="goods-title">售价：</a-col>
          <a-col :span="12">{{ goodsInfo.price }}</a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="6" class="goods-title">原价：</a-col>
          <a-col :span="12">{{ goodsInfo.original_price }}</a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="6" class="goods-title">服务内容：</a-col>
          <a-col :span="12">{{ goodsInfo.service }}</a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="6" class="goods-title">规格库存：</a-col>
          <a-col :span="12">
            <a-row>库存：{{ goodsInfo.goods_num }}</a-row>
            <a-row style="margin-top: 10px">
              <table border="1" borderColor="#f0f0f0">
                <thead>
                  <tr>
                    <th>规格</th>
                    <th>库存</th>
                    <th>价格</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(trItem, trIndex) of JSON.parse(goodsInfo.attr)" :key="trIndex">
                    <td>
                      <span style="margin-right: 4px" v-for="(item, index) of trItem.attr_list" :key="index">
                        {{ item.attr_name }}
                      </span>
                    </td>
                    <td>
                      {{ trItem.num }}
                    </td>
                    <td>
                      {{ trItem.price }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </a-row>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]" v-show="goodsInfo.detail">
          <a-col :span="6" class="goods-title">图文详情：</a-col>
          <a-col :span="12" style="max-height: 500px; overflow: scroll" v-html="goodsInfo.detail"></a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="6" class="goods-title">修改审核状态</a-col>
          <a-col :span="12">
            <a-radio-group
              @change="(e) => onConfirmStatus('is_verify', goodsInfo.id, e.target.value)"
              :defaultValue="goodsInfo.is_verify - 0"
            >
              <a-radio-button :value="0"> 待审核 </a-radio-button>
              <a-radio-button :value="1"> 通过 </a-radio-button>
              <a-radio-button :value="2"> 不通过 </a-radio-button>
            </a-radio-group>
          </a-col>
        </a-row>
      </a-spin>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { goodsList, status, updateAll as updateAllApi } from '@/api/goods/goods'
import { STable } from '@/components'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 50
  },
  {
    title: '产品名称',
    dataIndex: 'name',
    width: 150,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '系统分类',
    dataIndex: 'system_cat',
    scopedSlots: { customRender: 'system_cat' },
    width: 140
  },
  {
    title: '商户店铺名称',
    dataIndex: 'mch_name',
    width: 140,
    scopedSlots: { customRender: 'mch_name' },
  },
  {
    title: '售价',
    dataIndex: 'price',
    width: 100,
    scopedSlots: { customRender: 'price' },
  },
  {
    title: '库存',
    dataIndex: 'goods_num',
    width: 100,
    scopedSlots: { customRender: 'goods_num' }
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: 100
  },
  {
    title: '上架状态',
    dataIndex: 'status',
    width: 100,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '审核状态',
    dataIndex: 'is_verify',
    width: 100,
    scopedSlots: { customRender: 'is_verify' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    scopedSlots: { customRender: 'action' }
  },
]

export default {
  name: 'GoodsList',
  components: {
    STable
  },
  data () {
    return {
      columns: columns,
      selectedRowKeys: [],
      goods_id: 0,
      visible: false,
      autoFocusData: { type: '', index: 0 }, // 获取焦点参数
      loadData: (parameter) => {
        var newObj = {}
        Object.assign(newObj, parameter, this.queryParam)
        return goodsList(newObj).then((res) => {
          console.log(res)
          return res.data
        })
      },
      goodsInfo: {},
      queryParam: {
        name: '',
        mch_id: -1,
        is_verify: 0
      },
      statusLoading: [],
      spinning: false
    }
  },
  activated () {
    this.$refs.tableList.$data.localDataSource = []
    this.$refs.tableList.refresh(false)
  },
  created () {},
  methods: {
    onChange (value) {
      console.log(value)
    },
    updateCheck (res) {
      return false
    },
    refresh (row) {
      this.$nextTick(() => {
        this.$refs.tableList.refresh(true)
      })
    },
    onEdit (goods) {
      this.visible = true
      this.goodsInfo = goods
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    updateAll (type, status) {
      var text = '上架'
      var that = this
      type = 'status'
      text = status === 1 ? '上架' : '下架'
      this.$confirm({
        title: '是否批量' + text + '?',
        onOk () {
          updateAllApi({
            type: type,
            status: status,
            goods_id: that.selectedRowKeys
          }).then((res) => {
            if (res.code === 0) {
              that.$nextTick(() => {
                that.$refs.tableList.$data.localDataSource = []
                that.$refs.tableList.refresh(false)
              })
            } else {
              that.$message.error(res.msg)
            }
          })
        },
        onCancel () {}
      })
    },
    onClose () {
      this.visible = false
      this.goodsInfo = {}
    },
    onConfirmStatus (type, goodsId, value = -1) {
      if (type == 'status') {
        this.statusLoading[goodsId] = true
      }
      if (type == 'is_verify') {
        this.spinning = true
      }
      status({ id: goodsId, type: type, value: value }).then((res) => {
        if (res.code === 0) {
          this.refresh()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        if (type == 'status') {
          this.statusLoading[goodsId] = false
        }
        if (type == 'is_verify') {
          this.spinning = false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
.goods-title {
  text-align: right;
  font-weight: bold;
}
td {
  padding: 0 6px;
}
th {
  padding: 0 6px;
}
tr:hover {
  background: #f0f0f0;
}
.over_e {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
